<template>
  <div class="register-container">
    <!-- 左侧插画 -->
    <div class="illustration-section">
      <img :src="registerImage" alt="医护关怀插画" class="illustration-image">
    </div>

    <div class="form-section">
      <el-form
        ref="registerForm"
        :model="userRegisterData"
        :rules="formRules"
        @submit.native.prevent="handleSubmit"
      >
        <div class="form-header">
          <h1 class="title">欢迎注册</h1>
          <p class="subtitle">养老服务整合平台</p>
        </div>

        <!-- 账号输入 -->
        <el-form-item prop="username">
          <el-input
            v-model="userRegisterData.username"
            placeholder="请设置账号"
            prefix-icon="User"
            autocomplete="username"
          />
        </el-form-item>

        <!-- 密码输入 -->
        <el-form-item prop="password">
          <el-input
            v-model="userRegisterData.password"
            type="password"
            placeholder="请设置密码"
            prefix-icon="Lock"
            autocomplete="current-password"
            show-password
          />
        </el-form-item>

        <!-- 确认密码输入 -->
        <el-form-item prop="repeatedPassword">
          <el-input
            v-model="userRegisterData.repeatedPassword"
            type="password"
            placeholder="请确认密码"
            prefix-icon="Lock"
            autocomplete="current-password"
            show-password
          />
        </el-form-item>

        <!-- 同意协议 -->
        <el-form-item prop="agreed">
          <el-checkbox v-model="userRegisterData.agreed" class="agree">
            <span class="agreement-text">我已阅读并同意</span>
            <el-link
                type="primary"
                :underline="false"
                class="agreement-link"
                @click="goToAgreement"
            >
              用户协议
            </el-link>
            <span class="agreement-text">和</span>
            <el-link
                type="primary"
                :underline="false"
                class="agreement-link"
                @click="goToPrivacyPolicy"
            >
              隐私政策
            </el-link>
          </el-checkbox>
        </el-form-item>


        <!-- 注册按钮 -->
        <div class="register_btn">
          <el-button
            native-type="submit"
            type="primary"
            class="register-btn">
            立即注册
          </el-button>
        </div>

        <!-- 登录链接 -->
        <div class="login-tip">
          <div class="ac">已有账号?</div>
          <div class="reg">
            <el-link type="primary" @click="goToLogin">立即登录</el-link>
          </div>
        </div>

      </el-form>
    </div>
  </div>

  <!-- 备案号信息 -->
  <div class="footer">
    <div>社区养老服务整合平台</div>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import { registerUser } from '../service/userApi.js';
import { ElMessage } from 'element-plus';
import router from '../router/index.js';
import { useStore } from 'vuex';
import store from "../store/index.js";
import registerImage from '@/assets/images/register.jpg'
export default defineComponent({
  setup() {
    // 其作用是获取 Vuex 的存储实例。
    const store = useStore();

    const userRegisterData = ref({
      username: '',
      password: '',
      repeatedPassword: '',
      agreed: false
    });

    const registerForm = ref(null);

    const formRules = {
      username: [{ required: true, message: '请设置账号', trigger: 'blur' }],
      password: [{ required: true, message: '请设置密码', trigger: 'blur' }],
      repeatedPassword: [
        { required: true, message: '请确认密码', trigger: 'blur' },
        {
          validator: (rule, value, callback) => {
            if (value!== userRegisterData.value.password) {
              callback(new Error('密码和确认密码不匹配'));
            } else {
              callback();
            }
          },
          trigger: 'blur'
        }
      ],
      agreed: [{ required: true, message: '请同意用户协议和隐私政策', trigger: 'change' }]
    };

    const goToLogin = () => {
      router.push('/login');
    };

    const goToAgreement = () => {
      router.push('/agreement')
      console.log('跳转到用户协议页面');
    };

    const goToPrivacyPolicy = () => {
      router.push('/privacyPolicy')
      console.log('跳转到隐私政策页面');
    };

    const handleSubmit = async () => {
      if (!userRegisterData.value.agreed) {
        ElMessage.error('请同意用户协议和隐私政策');
        return;
      }
      // 依据formRules.value.validate()对表单进行验证
      // 该方法依据formRules里定义的规则来验证表单数据，并且返回一个Promise
      // await关键字会等待验证完成
      await registerForm.value.validate();
// 调用registerUser函数，把userRegisterData对象当作参数传递给它，以此发起注册请求
      // 发起注册请求
      const response = await registerUser(userRegisterData.value);
      if (response.code === 200) {
        ElMessage.success('注册成功');
        goToLogin();
      }
    };

    return {
      userRegisterData,
      registerForm,
      formRules,
      goToLogin,
      goToAgreement,
      goToPrivacyPolicy,
      handleSubmit,
      registerImage
    };
  }
});
</script>

<style scoped lang="scss">
.register-container {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100%;
  background: linear-gradient(to bottom, #f0f8ff 0%, #ffffe0 70%, #d3e2bd 100%);
  display: flex;
  justify-content: center;
  align-items: center;

  .illustration-section {
    display: flex;
    align-items: center;
    justify-content: flex-end; // 右对齐插画
    padding-right: 4rem;
    // width: 30%;

    .illustration-image {
      max-height: 70vh;
      width: 90%;
      border-radius: 12px;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
    }
  }

  .form-section {
    display: flex;
    align-items: center;
    // place-items: center;
    // margin-top: 12%;
    padding-left: 6rem;


    width: 35%;
    max-width: 400px; // 限制最大宽度
    height: 78%;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);

    .form-header {
      margin-top: -100px;
      text-align: center;
      margin-bottom: 30px;

      .title {
        font-size: 24px;
        color: #333;
        margin-bottom: 8px;
      }

      .subtitle {
        color: #666;
        font-size: 14px;
        margin-bottom: -10px;
      }
    }
  }

  .register_btn {
    margin-top: 15px;
    margin-bottom: 10px;
  }


  .register-btn {
    width: 100%;
  }

  .form-actions {
    margin-top: 2rem;
    display: flex;
    justify-content: space-between;
  }

  input {
    height: 2rem;
  }

  .login-tip {
    display: flex;
    justify-content: flex-start;
    margin-top: 10px;
    // padding-right:70px;
    height: 1rem;
  }


  .ac {
    padding-right: 70px;
  }

  .reg {
    padding-left: 80px;
  }

  .agreement-link{
     
      margin-bottom: 5px;
    }
  // 响应式处理
  @media (max-width: 1024px) {
    grid-template-columns: 1fr;
 background: linear-gradient(to bottom, #f0f8ff 0%, #ffffe0 70%, #d3e2bd 100%);


    .illustration-section {
      justify-content: center;
      padding: 2rem 0;

      .illustration-image {
        max-height: 400px;
      }
    }
  }
}

// 备案号样式
.footer {
  position: fixed; /* 固定定位 */
  bottom: 0; /* 距离视口底部为 0 */
  left: 50%; /* 水平方向居中 */
  transform: translateX(-50%); /* 微调以确保完全居中 */
  font-size: 14px;
  display: flex;
  flex-direction: row; /* 水平排列 */
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%; /* 确保宽度占满整个视口 */
  box-sizing: border-box; /* 避免宽度计算问题 */
}
// 备案号样式
.beian-footer {
  bottom: 0;
  text-align: center;

  a {
    color: #1D1D26;
    font-size: 14px;
    text-decoration-line: underline;

    &:hover {
      color: #409EFF;
    }
  }
}
</style>